<!--  -->
<template>
<el-affix :offset="0">
  <div class='PersonalCenter-header'>
  <div class="navigation">
    <div class="navigation-div">
      <div class="log"><img src = 'https://ftp.bmp.ovh/imgs/2021/02/635c26d0169cc1ec.png' /></div>
      <div @click="dynamicSwitch">主页</div>
      <router-link :to="{ name: 'recommend' }"><div @click="recommendedSwitch" class="fonthearder">推荐</div></router-link>
      <div @click="blogSwitch" class="fonthearder">说一下</div>
      <router-link :to="{ name: 'Myhomebody' }"><div @click="myhomeSwitch" class="fonthearder">属于你的空间</div></router-link>
      <div>反馈</div>
    </div>
  </div>
  <div>
    <div class="search">
      <input type="text" class="header-input">
      <button class="header-btn">搜一下</button>
    </div>
  </div>
  <div class="AvatarsandSubscriptions">
    <div class="headportrait" @click="myhomeSwitch"><img src="https://ftp.bmp.ovh/imgs/2021/02/635c26d0169cc1ec.png" alt=""></div>
    <div>
      <el-dropdown>
        <span class="drop-down-list">
          收藏
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>无</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div>
      <el-dropdown>
        <span class="drop-down-list">
          动态
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>发布新的动态</el-dropdown-item>
            <el-dropdown-item>管理动态</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div>
      <el-dropdown>
        <span class="drop-down-list">
          消息
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>评论</el-dropdown-item>
            <el-dropdown-item>点赞</el-dropdown-item>
            <el-dropdown-item>私信</el-dropdown-item>
            <el-dropdown-item>关注</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div><button class="header-btn" @click="open">退出登录</button></div>
  </div>
</div>
</el-affix>
<div class="animate__animated animate__fadeIn exhibition" v-if="dynamicNavigation === 1">
  <ul class="exhibition-ul">
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>热门</h1>
        <span class="englishSpan">hot</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>排行</h1>
        <span class="englishSpan">seniority</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>个性</h1>
        <span class="englishSpan">individuality</span>
      </div>
    </li>
  </ul>
</div>
<div class="animate__animated animate__fadeIn exhibition" v-if="dynamicNavigation === 2">
  <ul class="exhibition-ul">
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>20</h1>
        <span class="englishSpan">hot</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>20</h1>
        <span class="englishSpan">seniority</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>20</h1>
        <span class="englishSpan">individuality</span>
      </div>
    </li>
  </ul>
</div>
<div class="animate__animated animate__fadeIn exhibition" v-if="dynamicNavigation === 3">
  <ul class="exhibition-ul">
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>30</h1>
        <span class="englishSpan">hot</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>30</h1>
        <span class="englishSpan">seniority</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>30</h1>
        <span class="englishSpan">individuality</span>
      </div>
    </li>
  </ul>
</div>
<div class="animate__animated animate__fadeIn exhibition" v-if="dynamicNavigation === 4">
  <img src="https://ftp.bmp.ovh/imgs/2021/02/635c26d0169cc1ec.png" class="myHomeUserImg">
  <h2>{{user.username + '的主页'}}</h2>
  <ul class="exhibition-ul">
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>访问量</h1>
        <span class="englishSpan">Access number</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <router-link :to="{name: 'attention'}"><h1 class="yuanchuang">关注</h1></router-link>
        <span class="englishSpan">attebtion</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <router-link :to="{name: 'syxelement'}"><h1 class="yuanchuang">原创文章</h1></router-link>
        <span class="englishSpan">original article</span>
      </div>
    </li>
    <li class="exhibition-ul-li">
      <div class="listDivEnglish">
        <h1>收藏</h1>
        <span class="englishSpan">enshrine</span>
      </div>
    </li>
  </ul>
  <div style="text-align: right; margin-right:50px; cursor: pointer;">
    <button style="margin-bottom: 5px; background: none; color: #fff; border:2px solid #fff;">编辑资料</button>
  </div>
</div>
</template>

<script lang='ts'>

import { defineComponent } from 'vue'
import headersFunctionAll from '@/use/presonalCenter/header.ts'

export default defineComponent({
  name: '',
  props: {
    msg: String
  },
  setup () {
    // 变量
    const {
      dynamicNavigation,
      user
    } = headersFunctionAll()
    console.log(user)
    // 方法
    const {
      dynamicSwitch,
      recommendedSwitch,
      blogSwitch,
      myhomeSwitch,
      open
    } = headersFunctionAll()
    return {
      dynamicNavigation,
      dynamicSwitch,
      recommendedSwitch,
      blogSwitch,
      myhomeSwitch,
      open,
      user
    }
  }
})
</script>

<style scoped lang='scss'>
img{
  width: 40px;
  height: 40px;
}
h2{
    color: #fff;
  }
.PersonalCenter-header{
  color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  box-shadow:0px 3px 10px rgba(0, 0, 0, .1);
  min-width: 1260px;
  background-color: rgb(49, 49, 50);
}
.header-input {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 250px;
  min-width: 100px;
  max-height: 17px;
  padding: 5px 20px 5px;
  border: 2px solid rgba(0, 0, 0, .1);
  -webkit-border-radius: 3px;
  border-radius: 3px 0px 0px 3px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgb(155, 155, 155);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(252,252,252,1);
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.header-btn{
  max-height: 21px;
  min-width: 40px;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 5px 20px;
  border: 0px;
  -webkit-border-radius: 3px;
  border-radius: 0px 3px 3px 0px;
  font: normal 16px/normal Tahoma, Geneva, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: skyblue;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.search{
  display: flex;
}

.navigation-div{
  display: flex;
  align-items: center;
  div{
    box-sizing: border-box;
    padding: 0px 11px;
    height: 50px;
    line-height: 50px;
    transition: all 0.4s;
    cursor: pointer;
  }
  div:hover{
    color: #ffffff;
  }
  .log{
    margin-left: 20px;
    height: 40px;
  }
}
.AvatarsandSubscriptions{
  display: flex;
  align-items: center;
  div{
    box-sizing: border-box;
    padding: 0px 15px;
    height: 50px;
    line-height: 50px;
    transition: all 0.4s;
    cursor: pointer;
  }
  .headportrait{
    height: 40px;
  }
}
.drop-down-list{
  color: #dbdbdb;
  transition: all 0.4s;
}
.drop-down-list:hover{
  color: #ffffff;
}

.exhibition{
  background-color: rgb(20, 20, 20);
  text-align: center;
  .exhibition-ul{
    height: 100px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .exhibition-ul-li{
      margin: 0px 60px;
      div{
        text-align: center;
        span{
          font-size: 10px;
          font-size: 13px;
        }
      }
    }
}
}
.listDivEnglish{
  cursor: pointer;
}
.listDivEnglish:hover{
  span{
    color: skyblue;
  }
}
.englishSpan{
  transition: all 0.6s;
}
.myHomeUserImg{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 15px;
  border: 3px skyblue solid;
  // rgb(239, 239, 239)
}
.yuanchuang {
  color: #fff;
}
.fonthearder{
  color: #dbdbdb;
}
</style>
